<template>
  <div>
    <q-layout view="hHh LpR fff" class="cc-login-bg column">
      <q-page-container>
        <div class="q-pa-sm row justify-center q-mt-lg">
          <div class="q-mt-xl col text-center" :style="loginStyle">
            <div class="q-my-xl">
              <div v-if="mobile">
                <h4 class="text-white text-h4">
                  <strong>考研系统</strong>
                </h4>
              </div>
              <div v-else>
                <div class="row justify-center items-center">
                  <div class="banner"></div>
                </div>
              </div>
            </div>
            <router-view />
          </div>
        </div>
      </q-page-container>
    </q-layout>
  </div>
</template>

<script>
export default {
  name: 'UserLayout',
  props: {},
  data() {
    return {
      mobile: false,
      loginStyle: {
        width: '100%', maxWidth: '400px',
      },
    };
  },
  methods: {
  },
  mounted() {
    this.mobile = this.$q.platform.is.mobile;
    if (this.mobile) {
      this.loginStyle = {
        width: '100%', maxWidth: '360px',
      };
    }
  },
  watch: {
    $route(to) {
      if (document.title && document.title.split(' — ').length > 1) {
        [this.tabName] = document.title.split(' — ');
      } else {
        this.tabName = document.title;
      }
    },
  },
};
</script>
<style lang="stylus">
.cc-login-bg
  background url('~assets/login/bg.jpg')
  background-repeat no-repeat
  background-size cover
  .banner
    margin-top 60px
    min-width 700px
    height 100px
    //登录背景图片
    background url('') no-repeat 50% 50%
</style>
